<template lang="html">
  <div class="box">
    <header-title :HeaderTitle='title'></header-title>
    <ul class="rechargedetail_main" v-if='maindetail.length'>
      <li class="rechargedetail_box" v-for="(item,key,index) in maindetail">
        <div class="rechargedetail_list">
          <h2>方式：{{item.fanshi}}</h2>
          <h3>{{item.time}}</h3>
          <p>{{item.num}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import title from "../header/header.vue";
export default {
  name: 'geren',
  data () {
    return {
      title:{
        url:'/gerenwallet',
        title:"积分明细"
      },
      maindetail:[
      {fanshi:"购物",num:"456.00",time:'2017-02-05 13:45:65',type:"1"},
      {fanshi:"购物",num:"46.00",time:'2017-02-05 13:45:65',type:"0"},
      {fanshi:"购物",num:"56.00",time:'2017-02-05 13:45:65',type:"1"},
      {fanshi:"购物",num:"1456.00",time:'2017-02-05 13:45:65',type:"0"}
      ]
    }
  },
  components:{
    'header-title':title
  }
}
</script>

<style scoped lang="less">
@import '../../../assets/less/index.less';
.box {
  .rechargedetail_main{
    width: 100vw;
    .rechargedetail_box{
      width: 100vw;
      border-bottom: solid 1px @color8;
      .rechargedetail_list{
        width: @width;
        margin: 0 auto;
        text-align: left;
        font-size: @h1_font_size;
        line-height: 6vw;
        position: relative;
        padding: 2vw 0;
        h2{
          width: 60vw;
        }
        h3{}
        p{
          position: absolute;
          top: 4vw;
          right: 0vw;
        }
      }
    }
  }
}
</style>